<template>
  <div>
    <!-- 轮播图 -->
    <div style="display: flex">
      <div style="width: 800px">
        <el-carousel height="290px">
          <el-carousel-item v-for="item in imgList" :key="item">
            <img :src="item" alt="" style="width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="btn">
        <div class="center" @click="target('/index/page7')">个人中心</div>
        <div class="center" @click="target('/index/page6')">退役管理</div>
        <img src="https://t2.chei.com.cn/news/img/2159448080.jpg" alt="" />
      </div>
    </div>
    <!-- 视频展播 -->
    <div class="video">
      <el-divider content-position="center">视频展播</el-divider>
      <div class="item">
        <div v-for="item in videoList" :key="item">
          <video
            :src="item.url"
            controls
            height="300"
            width="250"
            :poster="item.f"
          ></video>
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 列表区域 -->
    <div style="display: flex;margin: 0 30px;">
      <!-- 政策法规 -->
      <div class="warp">
        <div style="color: #497d3b;display: flex;justify-content: space-between;margin: 20px 0;"><div>| 政策法规</div>
        <div>更多+</div> </div> 
        <el-divider content-position="left"></el-divider>
        <ul>
          <li
            style="margin: 10px 17px;text-overflow: ellipsis;white-space: nowrap;text-align: left"
            v-for="(item, index) in arrList1"
            :key="index"
            @click="jumpDesc(item)"
          >
            {{ item.title }}
          </li>
        </ul>
        <!-- <el-divider content-position="left"></el-divider> -->
      </div>
      <!-- 通知公告 -->
      <div class="warp">
        <div style="color: #497d3b;display: flex;justify-content: space-between;margin: 20px 0;"><div>| 通知公告</div>
        <div>更多+</div> </div> 
        <el-divider content-position="left"></el-divider>
        <ul >
          <li
            style="margin: 10px 17px;text-overflow: ellipsis;white-space: nowrap;text-align: left"
            v-for="(item, index) in arrList2"
            :key="index"
            @click="jumpDesc(item)"
          >
            {{ item.title }}
          </li>
        </ul>
        <!-- <el-divider content-position="left"></el-divider> -->
      </div>
      <!-- 国防知识 -->
      <div class="warp">
        <div style="color: #497d3b;display: flex;justify-content: space-between;margin: 20px ;"><div>| 国防知识</div> <div>更多+</div> </div>
        <el-divider content-position="left"></el-divider>
        <ul>
          <li
            style="margin: 10px 17px;text-align: left;"
            v-for="(item, index) in arrList3"
            :key="index"
            @click="jumpDesc(item)"
          >
         {{ item.title }}
          </li>
        </ul>
        <!-- <el-divider content-position="left"></el-divider> -->
      </div>
      
    </div>
  </div>
</template>

<script>
  import {getPolicy,getAfficheList,getNationalDesList} from '@/api'
export default {
  data() {
    return {
      imgList: [
        require("@/assets/2.jpg"),
        require("@/assets/3.jpg"),
        require("@/assets/4.png"),
      ],
      videoList: [
        {
          url: "https://chsi-v.oss-cn-beijing.aliyuncs.com/gfbzbvideo/2023zbxcp.mp4",
          f: "https://t2.chei.com.cn/news/img/1952005753.jpg",
          name: "陕西省2020年征兵宣传片",
        },
        {
          url: "https://chsi-v.oss-cn-beijing.aliyuncs.com/gfbzbvideo/shanxizbxc.mp4",
          f: "https://t1.chei.com.cn/news/img/2254997695.jpg",
          name: "2023年征兵公益宣传片",
        },
        {
          url: "https://chsi-v.oss-cn-beijing.aliyuncs.com/gfbzbvideo/2022jiangsuzbxc.mp4",
          f: "https://t2.chei.com.cn/news/img/2161581641.jpg",
          name: "江苏省2022年征兵宣传片",
        },
        {
          url: "https://chsi-v.oss-cn-beijing.aliyuncs.com/gfbzbvideo/shanxzbxc.mp4",
          f: "https://t2.chei.com.cn/news/img/1948511848.jpg",
          name: "山西省2020年征兵宣传片",
        },
      ],
      arrList1: [
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "招收军士的国家资助" },
        { name: "征兵工作条例" },
        { name: "中华人民共和国国务院 中华人民共和国中央" },
        { name: "中华人民共和国兵役法" },
      ],
      arrList2: [
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "关于对直接招收为军士的高等学校学生实行" },
      ],
      arrList3: [
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "关于对直接招收为军士的高等学校学生实行" },
        { name: "关于对直接招收为军士的高等学校学生实行" },
      ],
      formInline: {
          current: 1,
          size: 10,
          total: 10,
          title:''
        }
    };
  },
  methods: {
    target(url) {
      this.$router.push(url);
    },
    getList1(){
      getPolicy(this.formInline).then(res=>{
      
        this.arrList1=res.result.records
        
      })
     
 
      
    },
    getList2(){
      getAfficheList(this.formInline).then(res=>{
  
      this.arrList2=res.result.records
    })
    },
    getList3(){
      getNationalDesList(this.formInline).then(res=>{
     
        this.arrList3=res.result.records
      })
    },
    jumpDesc(par){
      console.log(par)
      this.$router.push({name: 'page8', params: {key: par}})
     }
  },
  mounted(){
   this.getList1()
   this.getList2()
   this.getList3()
  }
};
</script>

<style>
.video {
  width: 100%;
  /* border:1px solid red; */
  margin: 30px 0;
}
.item {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.btn {
  width: 300px;

  /* background: red; */
}
.center {
  width: 80%;
  height: 50px;
  border: 1px solid #75a56d;
  line-height: 50px;
  margin: 20px auto;
  background: #f5faf2;
  color: #3e804d;
  cursor: pointer;
}
.warp{
  margin: 10px 20px;
  width: 28%;
  height: 250px;
  /* background: red; */
  border-bottom: 1px solid #ccc;
}
</style>